<template>
  <div class="main-box">
    <a-timeline>
      <a-timeline-item v-for="item in info" :key="item.title">
        <div class="card-cont">
          <div class="card-box">
            <div class="title">
              <div class="text">{{ item.title }}</div>
              <div class="time">{{ item.time }}</div>
            </div>
            <div class="list">
              <div class="name">上报人：</div>
              <div class="val">{{ item.name }}</div>
            </div>
            <div class="list">
              <div class="name">操作：</div>
              <div class="val">{{ item.operate }}</div>
            </div>
            <div class="block">
              <div class="name">问题内容：</div>
              <div class="val">{{ item.content }}</div>
            </div>
          </div>
        </div>
      </a-timeline-item>
    </a-timeline>
  </div>
</template>

<script setup lang="ts">


const info = [
  {
    title: '案件上报',
    time: '2023-08-28 10:23:23',
    name: '五小福（上海五福）',
    operate: '案件上报',
    content: "如果你既不热爱你的工作，也不对之嗤之以鼻，那说明你做的还不够多",

  },
  {
    title: '案件上报1',
    time: '2023-08-28 10:23:23',
    name: '五小福（上海五福）',
    operate: '案件上报',
    content: "如果你既不热爱你的工作，也不对之嗤之以鼻，那说明你做的还不够多",

  },
  {
    title: '案件上报2',
    time: '2023-08-28 10:23:23',
    name: '五小福（上海五福）',
    operate: '案件上报',
    content: "如果你既不热爱你的工作，也不对之嗤之以鼻，那说明你做的还不够多",

  }, {
    title: '案件上报3',
    time: '2023-08-28 10:23:23',
    name: '五小福（上海五福）',
    operate: '案件上报',
    content: "如果你既不热爱你的工作，也不对之嗤之以鼻，那说明你做的还不够多",

  }
]

</script>

<style lang="scss" scoped>
.main-box {
  background-color: #fff;
  padding: 20px;
  overflow-y: auto;

  .card-cont {
    padding-bottom: 20px;
  }

  .ant-timeline-item:last-child .card-cont {
    padding-bottom: 0;
  }

  .card-box {
    border-radius: 4px;
    background-color: rgba(245, 245, 245, 1);
    padding: 10px;

    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .text {
        color: rgba(22, 119, 255, 1);
        font-size: 16px;
      }

      .time {
        color: rgba(0, 0, 0, 0.45);
        font-size: 14px;
      }
    }

    .list {
      display: flex;
      margin-top: 10px;
    }

    .block {
      margin-top: 10px;

      .name {
        margin-bottom: 5px;
      }
    }

    .name {
      color: rgba(0, 0, 0, 0.45);
      font-size: 14px;
    }

    .val {
      color: rgba(0, 0, 0, 0.85);
      font-size: 14px;
    }
  }
}
</style>